<template>
    <div class="wrapper">
        <x-header :left-options="{showBack: false}">首页</x-header>
        <div class="classpre">
            <p>课程通知</p>
        </div>
        <div class="classpredetail">
        <swiper height="226px">
            <swiper-item v-for="(item, index) in classNotice">
                <div class="swiper-top">
                    <div class="swiper-img"/>
                    <h2 class="swiper-topic">{{item.class.subject}}</h2>
                </div>
                <hr size="1" color="#eee" noshade="noshade"/>
                <div class="swiper-middle">
                    <div v-for="(detail) in item.subclass">
                        <p class="swiper-text">{{detail.time}} {{detail.address}}</p>
                    </div>
                    <p class="swiper-text">讲师：{{item.class.teacher}}</p>
                    <p class="swiper-text">助教：{{item.class.assistant}}</p>
                </div>
                <hr size="1" color="#eee" noshade="noshade"/>
                <div class="buttongroup">
                    <button class="swiper-button":disabled="isDisabled" v-on:click="signin(index)">签到</button>
                </div>
            </swiper-item>
        </swiper>
        </div>
        <div style="height:10px;background-color:#f2f2f2">
        </div>
        <div class="classpre">
            <p>课程预告</p>
        </div>
        <group class="bottom">
            <div v-for="(item,index) in classPreview">
                <div class="classpredetail">
                <div class="swiper-top">
                    <div class="swiper-img"/>
                    <h2 class="swiper-topic">{{item.class.subject}}</h2>
                </div>
                <hr size="1" color="#eee" noshade="noshade"/>
                <div class="swiper-middle">
                    <div v-for="(detail) in item.subclass">
                        <p class="swiper-text">{{detail.time}} {{detail.address}}</p>
                    </div>
                    <p class="swiper-text">讲师：{{item.class.teacher}}</p>
                    <p class="swiper-text">助教：{{item.class.assistant}}</p>
                </div>
                <hr size="1" color="#eee" noshade="noshade"/>
                <div class="buttongroup">
                    <!-- 0是未报名可以报名,1反 -->
                    <button class="buttonleft0" :disabled="isDisabled" v-show="item.class.signup==='0'" v-on:click="signup(index)">我要报名</button>
                    <button class="buttonleft1"  v-show="item.class.signup ==='1'"  >我要报名</button>
                    <button v-show="isSignup" class="buttonright" v-on:click="batchsignup(index)">代人报名</button>
                </div>
                </div>
                <div style="height:5px;background-color:#f2f2f2;clear:both"/>
            </div>
        </group>
    </div>
</template>

<script>

import { Swiper, SwiperItem, Group, Cell, XHeader,XButton } from 'vux'
import { mapActions } from "vuex";


export default {
    data(){
        return {
            isDisabled:false,
            httpmsg:'请求异常'
        }
    },
    components:{
        Swiper,
        SwiperItem,
        Group,
        Cell,
        XHeader,
        XButton
    },
    created(){
        this.init()
    },
    computed:{
        classPreview(){
            return this.$store.state.user.classpreview
        },
        classNotice(){
            return this.$store.state.user.classnotice
        },
        isSignup(){
            return this.$store.state.user.userauth.issignup
        },
        errinfo(){
            var errinfo = this.$store.state.user.errinfo
            return errinfo
        }
    },
    methods:{
        ...mapActions({
            setUserInfo: 'setUserInfo',
            getUserAuth: 'getUserAuth',
            getClasseNotice: 'getClasseNotice',
            getClassPreview: 'getClassPreview',
            signinClass:'signinClass',
            signupClass:'signupClass'
        }),
        init(){
            this.setUserInfo({ vue: this }).then(rs => {
                this.getUserAuth({vue: this}).then(rs => {
                    this.$vux.loading.hide()
                    console.log("getAuths")
                }).catch(error => {
                    console.log(error)
                })
                this.getClasseNotice({ vue: this }).then(rs => {
                    console.log("success")
                }).catch(error => {
                     var errinfo = this.errinfo
                    if(errinfo.code===400){
                        this.$vux.toast.text(errinfo.msg, 'default')
                    }else if(errinfo.response&&(errinfo.response===undefined)){
                        this.$vux.toast.text('请求超时', 'default')
                    }else{
                        this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                    }
                    console.log(error)
                })
                this.getClassPreview({ vue: this }).then(rs => {
                    console.log("success")
                }).catch(error => {
                     var errinfo = this.errinfo
                    if(errinfo.code===400){
                        this.$vux.toast.text(errinfo.msg, 'default')
                    }else if(errinfo.response&&(errinfo.response===undefined)){
                        this.$vux.toast.text('请求超时', 'default')
                    }else{
                        this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                    }
                    console.log(error)
                })  
            }).catch(error => {
                console.log(error)
            })
              
        },
        signinReq(param){
            this.isDisabled = true;
            this.signinClass({ vue: this, param: param }).then(rs => {
                setTimeout(() => {
                    this.isDisabled = false
                }, 1000)
                console.log("success")
                this.$vux.toast.text('签到成功', 'default')
                this.getClasseNotice({ vue: this }).then(rs => {
                    console.log("success")
                }).catch(error => {
                    this.$vux.toast.text(error, 'default')
                })
            }).catch(error => {
                  setTimeout(() => {
                    this.isDisabled = false
                }, 1000)
                var errinfo = this.errinfo
                if(errinfo.code===400){
                    this.$vux.toast.text(errinfo.msg, 'default')
                }else if(errinfo.response&&(errinfo.response===undefined)){
                    this.$vux.toast.text('请求超时', 'default')
                }else{
                    this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                }
                console.log(error)
            }) 
        },
        signin(index){
            console.log("signin",index);
            var notice = this.classNotice[index]
            //debugger
            var param = {'class_id':notice.class.class_id,"subclass_id":notice.subclass[0].subclass_id}
            console.log("signin param",param)
            debugger
            param["latitude"] = 0
            param["longitude"] = 0
            param["address"] = ""
            this.Util.YYBridge.do(
					"selectMap",
					{radius:100},
					rs => {
                        console.log(rs)
                        const {error_description, error_code, data} = JSON.parse(rs)
                        if (error_code === "0") {
                            const { latitude, longitude, addrstr } = data
                            param["latitude"] = latitude
                            param["longitude"] = longitude
                            param["address"] = addrstr
                        }else{
                            this.$vux.toast.text(error_description, 'default')
                        }    
                        this.signinReq(param)                    
					}
				)  
            
        },
        signup(index){
            console.log("signup",index)
            this.isDisabled = true;
            var preview = this.classPreview[index]
            var user = this.$store.state.user.userinfo
            console.log('预告',preview)
            var subclassids =[]
            for (let subindex = 0; subindex < preview.subclass.length; subindex++) {
                subclassids.push(preview.subclass[subindex].subclass_id)    
            }
            var param = {
                'class_id':preview.class.class_id,
                "class_name":preview.class.subject,
                "subclass_id":subclassids,
                "applicant_id":user.id,
                "applicant_name":user.name,
                "students":[{"user_id":user.id,"user_name":user.name}]}
            console.log("request param",JSON.stringify(param))
            this.signupClass({ vue: this, param: param }).then(rs => {
                console.log("success")
                this.$vux.toast.text('报名成功', 'default')
                  setTimeout(() => {
                    this.isDisabled = false
                }, 1000)
                this.getClasseNotice({ vue: this }).then(rs => {
                    console.log("success")
                }).catch(error => {
                    console.log(error)
                    this.$vux.toast.text(error, 'default')
                })
                this.getClassPreview({ vue: this }).then(rs => {
                    console.log("success")
                }).catch(error => {
                    setTimeout(() => {
                        this.isDisabled = false
                    }, 1000)
                    var errinfo = this.errinfo
                    if(errinfo.code===400){
                        this.$vux.toast.text(errinfo.msg, 'default')
                    }else if(errinfo.response&&(errinfo.response===undefined)){
                        this.$vux.toast.text('请求超时', 'default')
                    }else{
                        this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                    }
                    console.log(error)
                })  
            }).catch(error => {
                this.$vux.toast.text(error, 'default')
            }) 
        },
        batchsignup(index){
            console.log("batchsignup");
            this.$router.push({name:'student',params: { index: index}})
        }

    }
}
</script>

<style>
    .header{
        text-align: center;
        font-size: 1.25rem;
        padding: 6.25rem 0;
    }
    .classpre{
        margin-top:20px;
        padding-left: 18px;
        font-size:22px;
        height:31px;
        font-family: "PingFangSC-Medium";
    }
    .classpredetail{
        margin-top: 15px;
        margin-left:18px;  
        margin-right:18px;  
    }
    .swiper-top {
        display: -webkit-box; 
        height:25px;
    }
    .swiper-img{
        width:5px;
        height:12px;
        background-color: #F25257;
    }
    .swiper-topic{
        font-size: 15px;
        margin-left:5px;
        font-family: "PingFangSC-Medium";

    }
    .swiper-middle{
        margin-top:6px;
    }
    .swiper-text{
        font-size: 13px;
        height:24px;
        color: #5D5D5D;
        padding-top:5px;
        word-break:keep-all;
        white-space:nowrap;
        /* vertical-align:middle; */
    }
    .buttongroup{
        margin-top:5px;
        height:41px;
        display:block;
        /* margin-right: 18px; */
        float:right;
    }
    .buttonbottom{
        margin-top:5px;
        height:41px;
        display:-webkit-box;
        

    }
    .swiper-button{
        height:21px;
        width:68px;
        border-style: solid; 
        border-width: 1px;
        border-radius:5px;
        border-color:#F25257;
        color: #F25257;
        background-color: #ffffff;
        font-size: 13px;
        outline:none;
    }
    .buttonleft1{
        height:21px;
        width:80px;
        border-style: solid; 
        border-width: 1px;
        border-radius:5px;
        border-color:#F25257;
        color: #fff;
        background-color: #dddddd;
        font-size: 13px;
        outline:none;
    }
    .buttonleft0{
        height:21px;
        width:80px;
        border-style: solid; 
        border-width: 1px;
        border-radius:5px;
        border-color:#F25257;
        color: #fff;
        background-color: #F25257;
        font-size: 13px;
        outline:none;
    }
    .buttonright{
        height:21px;
        width:80px;
        border-style: solid; 
        border-width: 1px;
        border-radius:5px;
        border-color:#F25257;
        color: #F25257;
        background-color: #ffffff;
        font-size: 13px;
        outline:none;
    }
    .bottom{
        margin-bottom:46px;
    }
    .swiper-line{
        color: #eeeeee;
        height:0.5px;
        width:100%;
    }
    /* .swiper-block{
        height:5px;
        /* clear:both; */
        /* background-color:#f2f2f2"; */
    /* } */ 
</style>
